<template>
    <div class="clearfix">
        <section class="content-header clearfix">
            安全管理&nbsp;/&nbsp;安全隐患排查&nbsp;/&nbsp;审核
        </section>
        <div class="col-md-12 clearfix" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">排查时间：</label>
                                <div class="col-sm-8">
                                    <p>{{nowTime}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">检查项目：</label>
                                <div class="col-sm-8">
                                    <!-- <p>{{list.safeCheckcontent}}</p> -->
                                    <p>{{getItemName(list.safeCheckcontent,this.home.itemsList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">片区：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.areaId,this.home.selAreaList, 'areaId', 'areaName')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">点位：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.siteId,this.home.selSiteList, 'siteId', 'siteName')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">责任部门：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.deptId,this.home.deptList, 'deptId', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">责任人：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.personId,this.home.personList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">处理时限：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.timelimit,this.home.limitesList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">反映内容：</label>
                                <div class="col-sm-8">
                                    <p>{{list.reactcontent}}</p>
                                    <img v-for="item in list.photopathList" :key="item.value" :src="item" alt="">
                                </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">整改时间：</label>
                                    <div class="col-sm-8">
                                        <!-- <p>{{changed.time}}</p> -->

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">处理人：</label>
                                    <div class="col-sm-8 person">
                                        <!-- <p>{{changed.dealpersonId}}</p> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">反映内容：</label>
                                    <div class="col-sm-8">
                                        <p>11</p>
                                        <img :src="require('_SYS/img/user.jpg')" alt="">
                                        <img :src="require('_SYS/img/user.jpg')" alt="">
                                        <img :src="require('_SYS/img/user.jpg')" alt="">
                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 clearfix">
                            <div class="col-md-4"></div>
                            <div class="col-md-2" style="text-align: center">
                                <button type="button" class="btn btn-info" style="margin-right:50px" @click="addChange">办理</button>
                                <router-link to="trouble">
                                    <button type="button" class="btn btn-info">返回</button>
                                </router-link>
                            </div>
                            <div class="col-md-6"></div>
                        </div>
            </form>
        </div>
    </div>
</template>

<script>
import utils from "@/utils/index"
import { getItemName } from "@/filters/index.js";

export default {
    data() {
        return {
            nowTime: utils.getDate(),
            list: [],
            home: {
                itemsList: [],
                selAreaList: [],
                selSiteList: [],
                deptList: [],
                personList: [],
                limitesList: []
            },
            changed: []

        }
    },
    mounted() {

        this.selSafeIdList(() => {
            this.getItems()
            this.getSelArea()
            this.getselSite()
            this.getDept()
            this.getPerson()
            this.getLimites()
        })
    },
    methods: {
        getItemName,

        //检查项目列表
        getItems() {
            this.$api.safe.items().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.itemsList = res.data
                }
            });
        },
        //片区列表
        getSelArea() {
            this.$api.safe.selArea().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.selAreaList = res.data
                }
            });
        },
        //点位列表
        getselSite() {
            this.$api.safe.selSite({
                areaId: this.list.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.selSiteList = res.data
                }
            });
        },
        //部门列表
        getDept() {
            this.$api.safe.selDept({
                areaId: this.list.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.deptList = res.data
                }
            });
        },
        //责任人列表
        getPerson() {
            this.$api.safe.selPerson({
                areaId: this.list.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.personList = res.data
                }
            });
        },
        //处理时限列表
        getLimites() {
            this.$api.safe.limites().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.limitesList = res.data
                }
            });
        },
        //根据id获取隐患列表
        selSafeIdList(callback) {
            this.$api.safe.selSafeId({
                safeId: this.$route.query.safeId
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.list = res.data.safeInfo
                    this.changed = res.data.safeChanged
                    callback()
                }
            });
        },
        addChange() {
            this.$api.safe.addChange({
                safeId: this.$route.query.safeId,
                photopath: '',
                changedcontent: '没有图片'
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.$$message({
                        message: "恭喜您，处理成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "trouble" });
                }
            });
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
p {
  padding: 0px;
  margin: 0px !important;
  line-height: 34px;
  height: 34px;
}
img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.modal-body {
  .control-label {
    padding-top: 0px;
  }
  .form-group {
    line-height: 34px;
    height: 34px;
  }
}
</style>
